<template>
	<view>
		<form action="" @reset="reset" @submit="submit">
			<view class="top">
				<view class="box">
					<text>收货人</text>
					<input type="text" v-model='username' name='username' placeholder="请输入姓名" placeholder-class="tip" />
				</view>
				<view class="box">
					<text>手机号</text>
					<input type="text" v-model='userphone' name='userphone' placeholder="请输入您的手机号"
						placeholder-class="tip" />
				</view>
				<view class="box">
					<text>所在地址</text>
					<input type="text" v-model='location' name='location' placeholder="请输入您的地址"
						placeholder-class="tip" />
				</view>
				<view class="box2 wrap">
					<text>详细地址</text>
					<textarea v-model="useraddress" name='useraddress' class="text-area"></textarea>
				</view>
			</view>
			<view class="bot">
				<view class="bq">
					<view>标签</view>
					<radio-group @change="radioChange" v-model='label' name='label'>
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" color="#f6af36" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="mr">
					<text>设置默认地址</text>
					<switch name='status'></switch>
				</view>
				<view class="tx">
					提醒：每次下单会默认推荐该地址
				</view>
				<button class="pre" type="warn" form-type="submit">保存并使用</button>
				<button class="reset" type="default" form-type="reset">重置</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		addressadd,
		addressedit
	} from '../../request/app.js'
	export default {
		data() {
			return {
				items: [{
					value: '家',
					name: '家'
				}, {
					value: '公司',
					name: '公司'
				}, {
					value: '学校',
					name: '学校'
				}],
				current: 0,
				username: '',
				userphone: '',
				location: '',
				useraddress: '',
				status: true,
				label: '',
				id: ''
			}
		},
		onLoad(options) {
			this.id = options.id,
				this.username = options.username,
				this.userphone = options.userphone,
				this.location = options.location,
				this.useraddress = options.useraddress,
				this.label = options.label
		},
		methods: {
			submit(e) {
				if (this.id) {
					addressedit({
						id: this.id,
						username: this.username,
						userphone: this.userphone,
						location: this.location,
						useraddress: this.useraddress,
						label: this.label
					}, {
						authorization: uni.getStorageSync('userinfo').token
					}).then(res => {
						console.log(res, '地址编辑');
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '/pages/address/address'
							})
						}
					})
				} else {
					console.log(e.detail.value);
					const {
						username,
						userphone,
						location,
						useraddress,
						status,
						label
					} = e.detail.value
					addressadd({
						uid: uni.getStorageSync('userinfo').uid,
						username,
						userphone,
						location,
						useraddress,
						status: status == true ? 1 : 0,
						label
					}, {
						authorization: uni.getStorageSync('userinfo').token
					}).then(res => {
						console.log(res, '地址添加');
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '/pages/address/address'
							})
						}
					})
				}
			},
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			reset() {
				this.username = '',
					this.userphone = '',
					this.location = '',
					this.useraddress = '',
					this.status = '',
					this.label = ''
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f2f3
	}

	.top {
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.box {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #dfdfdf;
		margin: 0rpx 30rpx;
	}

	.box text {
		margin-right: 60rpx;
	}


	.tip {
		color: #9298a2;
	}

	.box1 {
		margin: 50rpx 0 0 60rpx;
	}

	.box1 button {
		border: 2rpx solid #eee;
	}

	.box1 .sub {
		background-color: #1aad19;
		color: #fff;
		margin-right: 70rpx;
	}

	.box2 {
		padding-bottom: 50rpx;
		display: flex;
		margin: 50rpx 0 0 30rpx;
		border-bottom: 2rpx solid #dfdfdf;
	}

	.wrap {
		margin-right: 30rpx;
		border-bottom: 2rpx solid #eee;
	}

	.wrap text {
		margin-top: 100rpx;
	}

	.wrap .text-area {
		width: 540rpx;
		margin-left: 20rpx;
		background-color: #f7f7f7;
		text-indent: 64rpx;
	}

	.bot {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 40rpx 0 20rpx 0;
	}

	.bot .bq {
		display: flex;
	}

	.bot .bq>view {
		margin: 0 46rpx;
	}

	.bot .bq radio-group {
		display: flex;
	}

	.bot .bq radio-group label {
		display: flex;
		margin: 0 10rpx;
	}

	.bot .mr {
		display: flex;
		justify-content: space-between;
		padding: 0 12rpx 0 40rpx;
		margin-top: 40rpx;
	}

	.bot .mr text {
		color: #000;
	}

	.bot .tx {
		color: #000;
		margin: 20rpx 0 40rpx 40rpx;
		border-bottom: 2rpx solid #eee;
		padding-bottom: 20rpx;
	}
</style>
